<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>电影详情页</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link href="../css/icons-extra.css" rel="stylesheet" />
  <link rel="stylesheet" href="../css/base.css">
  <style>
    .banner {
      background-color: #18D7D7;
      height: 8rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mui-title {
      color: #0F0F0F;
    }

    .banner img {
      width: 4rem;
      height: 7rem;
    }

    .mui-card {
      box-shadow: none;
      margin-bottom: 0;
    }

    .mui-card-header:after {
      height: 0;
    }

    .mui-card-content-inner {
      padding-top: 0;
      padding-bottom: 0;
    }

    .mui-card-content-inner p {
      padding-bottom: 10px;
    }

    .cart-mid-title {
      padding: 0 15px;
    }

    .cart-mid-desc {
      width: 85%;
    }

    .cart-bottom-desc {
      display: flex;
      justify-content: space-between;
    }

    .actor-item {
      width: 23%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .actor-item img {
      height: 2.4rem;
    }

    /* 评论 */
    .comment {
      margin-top: 30px;
    }

    .comment-title {
      background-color: #ddd;
      text-align: center;
      height: 1.2rem;
      line-height: 1.2rem;
    }

    .comment-content {
      margin: 10px 0 10px 25px;
      padding-right: 15px;
    }

    .comment-item {
      border-bottom: 1px solid #ddd;
      padding-top: 10px;
      padding-bottom: 20px;
    }

    .comment-item .item-t {
      line-height: .8rem;
    }

    .comment-item .item-t::after {
      display: block;
      content: '';
      height: 0;
      visibility: hidden;
      clear: both;
    }

    .comment-item .item-t img {
      height: .8rem;
      width: .8rem;
      border-radius: 50%;
      float: left;
    }

    .comment-item .item-t .nickname {
      float: left;
      margin-left: .3rem;
      color: #000000;
      font-size: .32rem;
    }

    .comment-item .item-t .time {
      float: right;
    }

    .comment-item .item-b {
      margin-left: 1.1rem;
    }
  </style>
</head>

<body>
  <!-- 头部标题 -->
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">影人</h1>
  </header>
  <!-- 内容主容器 -->
  <div class="mui-content">
    <div class="banner">
      <img src="../images/movie.jpg" alt="">
    </div>
    <div class="mui-card">
      <div class="mui-card-header cart-top-title">王千源</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>Qianyuan Wang</p>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header cart-mid-title">
        <p>个人简介</p>
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner cart-mid-desc">
          王千源，男，中国，辽宁，辽宁
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header cart-bottom-title">
        <p>代表作品</p>
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner cart-bottom-desc">
          <div class="actor-item">
            <img src="../images/actor.jpg">
            <div class="desc">永不回头</div>
            <div class="fen">8.7分</div>
          </div>
          <div class="actor-item">
            <img src="../images/actor.jpg">
            <div class="desc">永不回头</div>
            <div class="fen">8.7分</div>
          </div>
          <div class="actor-item">
            <img src="../images/actor.jpg">
            <div class="desc">永不回头</div>
            <div class="fen">8.7分</div>
          </div>
          <div class="actor-item">
            <img src="../images/actor.jpg">
            <div class="desc">永不回头</div>
            <div class="fen">8.7分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 评论 -->
  <div class="comment">
    <div class="comment-title">
      评论
    </div>
    <div class="comment-content">
      <div class="comment-item">
        <div class="item-t">
          <img src="../images/actor.jpg" alt="">
          <p class="nickname">昵称</p>
          <p class="time">2018-1-31</p>
        </div>
        <div class="item-b">
          我是评论的内容我是评论的内容我是评论的内容
        </div>
      </div>
      <div class="comment-item">
        <div class="item-t">
          <img src="../images/actor.jpg" alt="">
          <p class="nickname">昵称</p>
          <p class="time">2018-1-31</p>
        </div>
        <div class="item-b">
          我是评论的内容我是评论的内容我是评论的内容
        </div>
      </div>
      <div class="comment-item">
        <div class="item-t">
          <img src="../images/actor.jpg" alt="">
          <p class="nickname">昵称</p>
          <p class="time">2018-1-31</p>
        </div>
        <div class="item-b">
          我是评论的内容我是评论的内容我是评论的内容
        </div>
      </div>
    </div>
  </div>

</body>

</html>